<template>
  <div>
    <h2>音乐播放器</h2>

    <audio controls :src="getCurrentSrc"  @ended='handleEnabled'  autoplay/>

    <ul>
      <li :class='{active:index===currentIndex}' v-for="(item,index) in musicData" :key = "item.id" @click="handleClick(index)">
           <h2>
             {{item.id}}-歌名:{{item.name}}
             <p>作者:{{item.author}}</p>
           </h2>
      </li>
    </ul>
    <button  @click="handleNext">下一首</button>
  </div>
</template>

<script>
const musicData = [
  {
    id: '1',
    name: '口是心非',
    author: '秦Sir',
    songSrc: require('../../assets/music/口是心非 - 秦Sir.mp3')
  }, {
    id: '2',
    name: '四年半',
    author: '葛雨晴',
    songSrc:  require('../../assets/music/四年半 - 葛雨晴.mp3')
  }, {
    id: '3',
    name: '漫步宇宙',
    author: '蓝心羽',
    songSrc:  require('../../assets/music/漫步宇宙 - 蓝心羽.mp3')
  }
  , {
    id: '4',
    name: '霜雪千年',
    author: '萧忆情Alex',
    songSrc:  require('../../assets/music/霜雪千年 - 萧忆情Alex.mp3')
  }]

export default {
  name: "music",
  data() {
    return {
      currentSrc: musicData[0].songSrc,
      musicData,
      currentIndex:0,
    }
  },
  methods:{
    handleClick(index){
      this.currentIndex = index
    },
    handleEnabled(){
      this.handleNext()
    },
    handleNext(){
      this.currentIndex  = (this.currentIndex + 1 ) % this.musicData.length
    }
  },
  computed:{
    getCurrentSrc(){
      return this.musicData[this.currentIndex].songSrc
    }
  },
}
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}

ul {
  list-style: none;
}

ul li {
  margin: 20px 20px;
  padding: 10px 5px;
  border-radius: 3px;
}

ul li.active {
  background-color: #D2E2F3;
}
</style>
